<template>
  <view :id="$sUid" class="s-readmore" :class="c_class" :style="custom_style">
    <view class="s-readmore__container" :style="container_style">
      <view class="s-readmore__content">
        <slot />
      </view>
    </view>
    <view
      v-if="status === 'close' || (status === 'open' && showClose)"
      class="s-readmore__toggle"
      :style="toggle_style"
      @click="toggle"
    >
      <slot name="toggle" :scopeParams="scopeParams" :status="status">
        <view class="s-readmore__toggle-button">
          <text class="s-readmore__toggle-text">
            {{ status === "close" ? openText : closeText }}
          </text>
          <view class="s-readmore__toggle-icon">
            <s-icon :name="status === 'close' ? 'arrow-down' : 'arrow-up'" />
          </view>
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
import componentMixin from '../../mixins/componentMixin';

/**
 * s-readmore 展开阅读更多
 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
 * @property {Number|String} height 内容超出此高度才会显示展开全文按钮
 * @property {String} openText 展开按钮文字
 * @property {String} closeText 收起按钮文字
 * @property {Boolean} showClose 展开后是否显示收起按钮
 * @property {Number|String} fontSize 按钮文字大小
 * @property {String} color 按钮文字颜色
 * @property {String|Object} shadowStyle 对阴影的自定义处理样式
 * @property {String|Object} toggleStyle 展开按钮容器样式
 * @event {Function} open 展开时触发
 * @event {Function} close 收起时触发
 * @example <s-readmore :height="300">内容</s-readmore>
 */
export default {
  name: 'SReadmore',
  mixins: [componentMixin],
  props: {
    height: {
      type: [Number, String],
      default: 300,
    },
    openText: {
      type: String,
      default: '展开阅读全文',
    },
    closeText: {
      type: String,
      default: '收起',
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    fontSize: [String, Number],
    color: String,
    shadowStyle: [String, Object],
    toggleStyle: [String, Object],
  },
  data: () => ({
    status: '',
  }),
  computed: {
    c_class() {
      return this.$mergeClass(this.custom_class, this.status ? `s-readmore--${this.status}` : '');
    },
    heightPx() {
      return this.$toPx(this.height);
    },
    container_style() {
      return this.$mergeStyle({
        height: this.status === 'close' ? this.$addUnit(this.height) : '',
      });
    },
    toggle_style() {
      return this.$mergeStyle({
        fontSize: this.$addUnit(this.fontSize),
        color: this.color,
      }, this.status === 'close' ? this.shadowStyle : '', this.toggleStyle);
    },
  },
  mounted() {
    this.refresh();
  },
  methods: {
    refresh() {
      this.$getRect(`#${this.$sUid} .s-readmore__content`).then(rect => {
        if (rect.height > this.heightPx) {
          if (!this.status) {
            this.status = 'close';
          }
        } else {
          this.status = '';
        }
      });
    },
    toggle() {
      if (this.status) {
        this.status = this.status === 'close' ? 'open' : 'close';
        this.$emit(this.status);
      }
    },
  },
};
</script>

<style lang="scss" src="./index.scss"></style>
